<template>
  <div class="tags">
    <ul>
      <li v-for="item in tags" :key="item">
        <button class="btn1" disabled>{{item}}</button>
        <button class="del" @click="imageDel(item)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)
export default {
  props: ['tags'],
  methods: {
    imageDel (tag) {
      Dialog.confirm({
        title: '操作确认',
        message: '确认删除？'
      })
        .then(() => {
          const parse = {
            data: {
              docker: `curl --unix-socket /var/run/docker.sock -s -X DELETE "http:/v1.40/images/${tag}"`
            }
          }
          this.$post(parse, res => {
            const data = JSON.parse(res)
            if (data.message) {
              return this.$Notify(data.message)
            }
            this.$Notify({ type: 'success', message: '删除成功！' })
            this.$emit('success')
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.tags{
  button{
    padding: vw(5) vw(10);
    background: #f4f4f5;
    font-size: vw(26);
  }
  .btn1{
    border-radius: vw(5) 0 0 vw(5);
    color: #bcbec2;
  }
  .del{
    padding: vw(10) vw(25);
    border-radius: 0 vw(5) vw(5) 0;
    color: #fff;
    background: rgb(255, 86, 86);
  }
  ul{
    display: flex;
    flex-wrap: wrap;
  }
  li{
    display: flex;
    line-height: vw(40);
    margin: 0 vw(10);
    margin-bottom: vw(15);
  }
}
</style>
